<template>
    <div class="test">{{ count }}</div>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    onActivated,
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onDeactivated,
    onErrorCaptured,
    onMounted,
    onRenderTracked,
    onRenderTriggered,
    onUnmounted,
    onUpdated,
    reactive,
    ref,
    toRef,
} from 'vue'

export default defineComponent({
    props: {
        count: {
            type: Number,
            default: 1,
            require: true,
        },
    },
    setup(props, context) {
        console.log(1, props, context)
        console.log(this) // undefined
        console.log('test render')
        console.log(props)
        const refCount = ref(0)
        const test = reactive({
            msg: 'hello ',
        })
        const msg = computed(() => `${test.msg} world`)
        console.log('msg', msg)
        onBeforeMount(() => {
            console.log('onBeforeMount')
        })
        onMounted(() => {
            console.log('onMounted')
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate')
        })
        onUpdated(() => {
            console.log('onUpdated')
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
            console.log('onUnmounted')
        })
        onErrorCaptured(() => {
            console.log('onErrorCaptured')
        })
        onRenderTracked(() => {
            console.log('onRenderTracked')
        })
        onRenderTriggered(() => {
            console.log('onRenderTriggered')
        })
        onActivated(() => {
            console.log('onActivated')
        })
        onDeactivated(() => {
            console.log('onDeactivated')
        })
        return {
            refCount,
            count2: toRef(props, 'count'),
        }
    },
    // beforeCreate() { console.log('beforeCreate') },
    // created() { console.log('created') },
    // beforeMount() { console.log('beforeMount') },
    // mounted() { console.log('mounted') },
    // beforeUpdate() { console.log('beforeUpdate') },
    // updated() { console.log('updated') },
    // beforeUnmount() { console.log('beforeUnmount') },
    // unmounted() { console.log('unmounted') },
    // errorCaptured() { console.log('errorCaptured') },
    // renderTracked() { console.log('renderTracked') },
    // renderTriggered() { console.log('renderTriggered') },
    // activated() { console.log('activated') },
    // deactivated() { console.log('deactivated') },
})
</script>
